<template>
  <div class="city">
    <city-header></city-header>
    <city-search :allCity="allCity"></city-search>
    <city-list :hotCity="hotCity" :allCity="allCity" :char="char"></city-list>
    <city-alpha :allCity="allCity" @change="handChange"></city-alpha>
  </div>
</template>

<script>
import axios from "axios";
import CityHeader from "@/components/cityPages/CityHeader";
import CitySearch from "@/components/cityPages/CitySearch";
import CityList from "@/components/cityPages/CityList";
import CityAlpha from "@/components/cityPages/CityAlpha";
export default {
  name: "City",
  data() {
    return {
      hotCity: [],
      allCity: {},
      char: ""
    };
  },
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlpha
  },
  methods: {
    handChange(e) {
      // console.log(e);
      this.char = e;
    },
    getCityInfo() {
      axios.get("static/mock/city.json").then(res => {
        // console.log(res);
        let tmp = res.data;
        if (tmp.ret && tmp.data) {
          // console.log(tmp.data.cities);
          this.hotCity = tmp.data.hotCities;
          this.allCity = tmp.data.cities;
        }
      });
    }
  },
  mounted() {
    this.getCityInfo();
  }
};
</script>


<style scoped>
</style>
